<section class="address-overview">
  <div class="row">
    <div class="card-section col-md-12 col-lg-7 pr-0-md js-ad-dependant-mb-2">
      <div class="card">
        <div class="card-body">
          <h1 class="card-title">
            <%= if token_name?(@token) do %>
              <%= link(@token.name, to: token_path(BlockScoutWeb.Endpoint, :show, @token.contract_address_hash)) %>
            <% else %>
              <%= gettext("Token Details") %>
            <% end %>
            <!-- buttons -->
            <span class="overview-title-buttons token float-right">
              <span class="overview-title-item">
                <span
                  aria-label='<%= gettext("View Contract") %>'
                  class="btn-contract-icon"
                  data-placement="top"
                  data-toggle="tooltip"
                  title='<%= gettext("View Contract") %>'
                  onclick='<%= "location='#{address_path(@conn, :show, Address.checksum(@token.contract_address_hash))}'" %>'
                >
                  <svg class="safari_only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32"  transform="translate(8,8)">
                    <path fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1zM14 2H2v12h12V2z"/>
                    <path fill-rule="evenodd" d="M11 9h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm0-3H5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zM5 7h1a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 3h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2z"/>
                  </svg>
                </span>
              </span>
              <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
                  additional_classes: ["overview-title-item"],
                  clipboard_text: @token_id,
                  aria_label: gettext("Copy Token ID"),
                  title: gettext("Copy Token ID") %>
              <%= render BlockScoutWeb.CommonComponentsView, "_btn_qr_code.html" %>
            </span>
          </h1>

          <h3><%= gettext "Token ID" %>: <%= to_string(@token_id) %></h3>

          <div class="d-flex flex-column flex-md-row justify-content-start text-muted">
            <div class="d-flex flex-row justify-content-start text-muted">
              <%= if external_url(@token_instance.instance) do %>
                <span class="mr-4">
                  <a data-test="external_url" href=<%=external_url(@token_instance.instance) %> target="_blank">
                  View In App <span class="external-token-icon"><%= render BlockScoutWeb.IconsView, "_external_link.html" %></span>
                  </a>
                </span>
              <% end %>
              <span class="mr-4"> <%= @token.type %> </span>
              <span class="mr-4"><%= @total_token_transfers %> <%= gettext "Transfers" %></span>
              <%= if decimals?(@token) do %>
                <span class="mr-4"><%= @token.decimals %> <%= gettext "Decimals" %></span>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-section col-md-12 col-lg-5 pl-0-md js-ad-dependant-mb-2">
      <div class="card">
        <div class="card-body">
          <div class="erc721-media" >
            <%= if media_type(media_src(@token_instance.instance, true)) == "video" do %>
              <video controls autoplay loop muted playsinline style="width: 100%;">
                <source src=<%= media_src(@token_instance.instance, true) %> type="video/mp4">
              </video>
            <% else %>
              <img src=<%= media_src(@token_instance.instance, true) %> />
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/token-counters.js") %>"></script>
</section>
<!-- Modal -->
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="qrModalLabel"><%= gettext "QR Code" %></h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="<%= gettext("Close") %>">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="data:image/png;base64, <%= qr_code(@conn, @token_id, @token.contract_address_hash) %> " class="qr-code" alt="qr_code" title="<%= @token.contract_address %>" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal"><%= gettext "Close" %></button>
      </div>
    </div>
  </div>
</div>
<%= render BlockScoutWeb.Advertisement.BannersAdView, "_banner_728.html", conn: @conn %>
